<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对其属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性 vertical-align 
		使用方法：1.用于表格中单元格垂直居中
		          2.用于行内元素以及行内块元素的垂直居中
				  【文本和图片垂直居中(对齐)效果】
				  对齐分为四种：基线对齐、顶部对齐
				            居中对齐、底部对齐
				元素种类：块元素、行元素、行内块元素
				块元素特点：独占一行、设置宽高
				行元素特点：一行内显示、不可设置宽高
				网页：元素之间嵌套生成
				行元素与块元素可以任意嵌套
				前提：设置宽高--行套快
				             --块套块 √
							 --块套行 √
				前提：一行内显示---行套块√
				               ---块套块×
							   ----块套行
							   ---行套行√
				  -->
				  <style>
					  p im g:nth-child(1){
						  /*vertical-align:baseline 默认基线对齐*/
							vertical-align:baseline;
					  }
					  /*问题:派生选择器，特点：找后代 p img*/
					  p img:nth-child(2){
					  						  /*vertical-align:baseline 顶部对齐*/
					  							vertical-align:top;
												width:500px;
												height:500px;
												background:red;
												}
												img.baseline{
													vertical-align: baseline;
												}
												img.top{
													vertical-align:top;
												}
												img.middle{
													vertical-align:middle;
												}
												img.bottom{
													vertical-align:bottom;
												}
				  </style>
	</head>
	<body>
	<!-- 需求结构：4个P 嵌套文字：图片叫什么名字 
	                   文字后加img，设定宽高：25-100px
					   每个图片后面加：基线对齐、顶部对齐
					             居中对齐、底部对齐
					   -->
					   <h1>文本与图片垂直属性</h1>
					  <p>hellokitty<img class="baseline" src="img/1.png"alt="hellokitty"width="100px"
					  height="100px">基线对齐</p>  
					  <p>hellokitty<img class="top"src="img/2.png"alt="hellokitty"width="100px"
					  height="100px">顶部对齐</p>  
					  <p>hellokitty<img class="middle" src="img/3.png"alt="hellokitty"width="100px"
					  height="100px">居中对齐</p>  
					  <p>hellokitty<img class="bottom" src="img/4.png"alt="hellokitty"width="100px"
					  height="100px">底部对齐</p>
						<!-- css选择器--抓第一张图片...
						 思路：派生选择器：找后代+伪类选择器：添加效果[错误]
						 错误原因:html结构不符合派生特点:p包含4个img
						 p img:nth-child(1)
						 -->
						
						
	</body>
</html>